import React, {Component} from 'react';
import {ScrollView,View,Text,StyleSheet,Image,TouchableOpacity} from "react-native";
import {pxToDp} from "../../../../utils/styleKits";
import {NavigationContext} from '@react-navigation/native';

let listData = [
  {
    imgUrl: 'https://www.itying.com/images/flutter/list1.jpg',
    name: '一叶知秋',
    sex: '男',
    age: 23,
    state: '单身',
    schoolRecord: '本科',
    whyRecommend: '年龄相仿',
    togetherNum: 40,
  }
];

class List extends Component {
  static contextType = NavigationContext;

  render() {
    return (
      <View style={{flex: 1}}>
        <ScrollView>
          {this.renderItem()}
        </ScrollView>
      </View>
    );
  }

  renderItem = () => {
    return [0,1,2,3,4,5,6,7,8,9].map(() => {
      return <TouchableOpacity style={styles.box} onPress={()=>this.context.navigate('detail')}>
        {/*左边*/}
        <View style={styles.infoBox}>
          {/*图片*/}
          <Image source={{uri: listData[0].imgUrl}} style={styles.img}/>
          {/*信息*/}
          <View style={styles.infoTextBox}>
            <View style={styles.infoTextHead}>
              <Text>{listData[0].name} </Text>
              <Text style={styles.sex}>{listData[0].sex === '女' ? '\ue68b' : '\ue68d'}</Text>
              <Text> {listData[0].age}</Text>
            </View>
            <Text>{listData[0].state} | {listData[0].schoolRecord} | {listData[0].whyRecommend}</Text>
          </View>
        </View>

        {/*右边*/}
        <View style={styles.right}>
          <Text style={{fontFamily: 'iconfont', color: 'red'}}>{'\ue82b'}</Text>
          <Text style={styles.rightText}>{listData[0].togetherNum}</Text>
        </View>
      </TouchableOpacity>
    })
  }
}

const styles = StyleSheet.create({
  box: {
    padding: pxToDp(20),
    borderBottomWidth: pxToDp(1),
    borderBottomColor: '#ddd',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  infoBox: {
    flexDirection: 'row'
  },
  img: {
    width: pxToDp(50),
    height: pxToDp(50),
    borderRadius: pxToDp(25),
  },
  infoTextBox: {
    marginLeft: pxToDp(10),
    justifyContent: 'center',
  },
  sex: {
    fontFamily: 'iconfont',
    color: '#e08fa6'
  },
  infoTextHead: {
    flexDirection: 'row',
  },
  right: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  rightText: {
    paddingLeft:pxToDp(10),
  }
});

export default List;